<template>
  <div>
    <basic-dialog
      :visible.sync="supplierVisible"
      :handleClose="handleCloseDialog"
      :title="title"
      :show-footer="false"
      :width="'65%'"
    >
      <div class="form-container">
        <el-form ref="queryData" :inline="true" :model="queryData" @submit.native.prevent>
          <el-form-item label="供应商代码:" prop="supplierCode">
            <el-input
              v-model="queryData.supplierCode"
              placeholder="请输入供应商代码"
              @keyup.enter.native="handleQueryData(1)"
            ></el-input>
          </el-form-item>
          <el-form-item label="供应商名称:" prop="supplierName">
            <el-input
              v-model="queryData.supplierName"
              placeholder="请输入供应商名称"
              @keyup.enter.native="handleQueryData(1)"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQueryData(1)"
              >查询</el-button
            >
            <el-button @click="handleResetData('queryData')">清空</el-button>
            <el-button @click="batchAdd">批量添加</el-button>
          </el-form-item>
        </el-form>
      </div>
      <BasicTable
        ref="basicTable"
        showSelectCol
        showTableIndex
        :showTotal="false"
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :pageSizes="pageSizes"
        :total="pagination.total"
        :tableHeight="443"
        :selectionChange="handleSelectChange"
      />
    </basic-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import BasicDialog from '@/components/BasicDialog';
import BasicTable from '@/components/skusTable';
import { getBtnsId } from '@/libs/btnsPermission';
import { querySupplierListService } from '@api/supplier/supervision/checkPlan';

export default {
  name: 'SelectSupplierDialog',
  components: {
    BasicDialog,
    BasicTable,
  },
  props: {
    supplierVisible: { type: Boolean, default: false },
    // 仅查询开票供应商
    invoice: { type: Boolean, default: false },
    title: { type: String, default: '选择供应商' }
  },
  data () {
    return {
      queryData: {
        supplierName: '', // 供应商名称
        supplierCode: '' // 供应商代码
      },
      pageSizes: [100, 500, 1000],
      pagination: {
        current: 1,
        total: 0,
        size: 100
      },
      tableInfo: {
        list: [],
        loading: false,
        columns: [],
        selection: []
      }
    };
  },
  watch: {
    supplierVisible: {
      immediate: true,
      handler (newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          this.updateColumns(newVal)
          this.reset()
        }
      }
    }
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn'])
  },
  methods: {
    // 批量添加
    batchAdd () {
      const { selection } = this.tableInfo;
      if (selection.length == 0) {
        return this.$message.warning('请勾选需要添加的供应商');
      }
      this.$emit('getSupplierList', this.tableInfo.selection)
      this.handleCloseDialog()
    },
    // 勾选
    handleSelectChange (val) {
      this.tableInfo.selection = val;
    },
    // 选择供应商
    handleSelectSupplier (row) {
      this.$emit('handle-select', row);
      this.handleCloseDialog();
    },
    // 获取 表格数据
    async handleQueryData (pageNum) {
      if (pageNum) {
        this.pagination.current = pageNum;
      }
      sessionStorage.setItem('buttonId', getBtnsId('查询'));
      const res = await querySupplierListService({ ...this.queryData, ...this.pagination }, state => { this.tableInfo.loading = state })
      if (res) {
        const { result } = res;
        this.tableInfo.list = result;
        // this.reloadTableLayout()
      }
    },
    // 重置查询条件
    handleResetData (formName) {
      this.$refs[formName].resetFields();
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:supplierVisible', false);
    },
    // 更新列表字段
    updateColumns () {
      this.tableInfo.columns = [
        { title: '供应商代码', key: 'supplierCode', width: 90 },
        { title: '供应商名称', key: 'supplierName', width: 240 },
        {
          title: '供应商类型',
          key: 'supplierTypeName',
        },
        {
          title: '供应商性质',
          key: 'supplierNatureName',
        },
        { title: '主营品类代码', key: 'mainCategoryCode', },
        { title: '主营品类', key: 'mainCategory', },
      ]
      this.reloadTableLayout()
    },
    // 重置状态
    reset () {
      this.tableInfo.list = []
      this.tableInfo.loading = false
      this.pagination.current = 1
      this.pagination.size = 100
      this.pagination.total = 0
      this.queryData.supplierCode = ''
      this.queryData.supplierName = ''
    },
    // 表格DOM重新渲染
    reloadTableLayout () {
      this.$nextTick(() => {
        // this.$refs.basicTable.$refs.elTable.doLayout();
      });
    },
  }
};
</script>
<style scoped>
.form-container {
  margin-bottom: 10px;
}
</style>
